﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>


<h2 >TimePicker control</h2>
<p>The TimePicker control is used to allow users to select time, and to display the time in specified format. The time will be displayed in a textbox. When user tap on the textbox, time picker control will be displayed to select a time. The control can be configured to select time automatically or by tapping on the select button. Based on the time format specified, the control will change its presentation to 24 hours or 12 hours format. Hour, minute and second can be scrolled cyclically.</p>
<p><img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=560909" alt="Time Picker Control" width="162" height="136" />&nbsp; <img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=560910" alt="Time Picker" width="162" height="136" />&nbsp; <img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=560911" alt="Time Picker" width="162" height="136" /></p>
<h3>Namespace</h3>
<p><code>StoreAppLib.Controls</code></p>
<h3>Using TimePicker</h3>
<p>To use TimePicker in your project, add reference to the StoreAppLib project or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.</p>
<p>To add TimePicker in a page, add the following namespace reference to the page.</p>
<p><code><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">Page</span><span style="color: black; font-size: 9.5pt;" lang="EN"> </span><span style="color: red; font-size: 9.5pt;" lang="EN">xmlns</span><span style="color: blue; font-size: 9.5pt;" lang="EN">:</span><span style="color: red; font-size: 9.5pt;" lang="EN">storeApp</span><span style="color: red; font-size: 9.5pt;">Control</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="using:StoreAppLib.Controls"</span><span style="color: blue; font-size: 9.5pt;"> ...</span></code></p>
<p>Use the following code to add control to the page. Use <strong>Time </strong>property to bind the control to your data source and use <strong>Format </strong>property to change the time display format.</p>
<p><code><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;</span><span style="color: red; font-size: 9.5pt;" lang="EN">storeApp</span><span style="color: red; font-size: 9.5pt;">Control</span><span style="color: blue; font-size: 9.5pt;" lang="EN">:</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">TimePicker</span><span style="color: red; font-size: 9.5pt;" lang="EN"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">Width</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="150"</span><span style="color: red; font-size: 9.5pt;" lang="EN"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">Height</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="30"</span><span style="color: red; font-size: 9.5pt;" lang="EN"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">BorderThickness</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="1"</span><span style="color: red; font-size: 9.5pt;" lang="EN"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">BorderBrush</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="Gray"</span><span style="color: red; font-size: 9.5pt;" lang="EN"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
    <span style="color: red; font-size: 9.5pt;" lang="EN">Time</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="{</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">Binding</span><span style="color: red; font-size: 9.5pt;" lang="EN"> CurrentTime<span style="color: blue; font-size: 9.5pt;" lang="EN">,</span> <span style="color: red; font-size: 9.5pt;" lang="EN">Mode</span><span style="color: blue; font-size: 9.5pt;" lang="EN">=TwoWay </span></span><span style="color: blue; font-size: 9.5pt;" lang="EN">}"</span><span style="color: red; font-size: 9.5pt;" lang="EN"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">Format</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="hh:mm:ss 
    tt"&nbsp;/&gt;</span></code></pThe control will hide the meridiem, if you use the 24 hours format (HH for hours). Set <strong><p>The control will hide the meridiem, if you use the 24 hours format (HH for hours). Set <strong>AutoSelect</strong> property to true, if you want to select the time automatically when you scroll. Setting this property to true will hide the &quot;Select&quot; and &quot;Cancel&quot; buttons.
    <p>You can use the following properties to customize the control.</p>
<ul>
<li><span style="color: red; font-size: 9.5pt;"><code>ButtonForeground</code></span>: Select and Cancel button colours. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>HeaderForeground</code></span>: Hour, minute and second header colour. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>TimeForeground</code></span>: Hour, minute, second and meridiem foreground colour. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>OuterBackground</code></span>: Control background colour. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>OuterBorderBrush</code></span>: Control border colour. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>InnerBackground</code></span>: Hour, minute, second and meridiem background colour. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>InnerBorderBrush</code></span>: Hour, minute, second and meridiem border colour</li>
<li><span style="color: red; font-size: 9.5pt;"><code>SurfaceBackground</code></span>:  If you apply transparent colours to background property, set this to page background colour. </li>
</ul>

</body>
</html>